<script setup>
defineOptions({
  name:'Swiper'
})
import {reactive, ref} from "vue";
import SwiperViewDt from '@/views/Mine/Swiper/components/indexdt.vue'
import SwiperView1 from '@/views/Mine/Swiper/components/index1.vue';
import SwiperView2 from '@/views/Mine/Swiper/components/index2.vue';
import SwiperView3 from '@/views/Mine/Swiper/components/index3.vue';
import SwiperView4 from '@/views/Mine/Swiper/components/index4.vue';
import SwiperView5 from '@/views/Mine/Swiper/components/index5.vue';
import SwiperView6 from '@/views/Mine/Swiper/components/index6.vue';
import SwiperView7 from '@/views/Mine/Swiper/components/index7.vue';
import SwiperView8 from '@/views/Mine/Swiper/components/index8.vue';
import SwiperView9 from '@/views/Mine/Swiper/components/index9.vue';
import SwiperView10 from '@/views/Mine/Swiper/components/index10.vue';
import SwiperView11 from '@/views/Mine/Swiper/components/index11.vue';
import SwiperView12 from '@/views/Mine/Swiper/components/index12.vue';
import SwiperView13 from '@/views/Mine/Swiper/components/index13.vue';
import SwiperView14 from '@/views/Mine/Swiper/components/index14.vue';

</script>

<template>
  <div>
    <div>
      <p>1,处理的时候不可以赋值相同的id，会挂载到全局，组件会冲突</p>
      <p>动态指示点pagination: {el: ".swiper-pagination", dynamicBullets: true,},</p>
      <p>分式pagination: {el: ".swiper-pagination",  type: "fraction",},</p>
    </div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 24rem">
          <span>Vue挂载组件版本</span>
          <SwiperViewDt></SwiperViewDt>
        </div>

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 30rem">
          <span>上方进度条</span>
          <SwiperView1></SwiperView1>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 23rem">
          <span>缩略图</span>
          <SwiperView2></SwiperView2>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 23rem">
          <span>嵌套</span>
          <SwiperView3></SwiperView3>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 24rem">
          <span>分组跳过</span>
          <SwiperView4></SwiperView4>
        </div>

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 22rem">
          <span>渐进缩放</span>
          <SwiperView5></SwiperView5>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 23rem">
          <span>渐变方块</span>
          <SwiperView6></SwiperView6>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 23rem">
          <span>渐变滚动</span>
          <SwiperView7></SwiperView7>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 24rem">
          <span>渐变翻转</span>
          <SwiperView8></SwiperView8>
        </div>

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 22rem">
          <span>渐进卡片</span>
          <SwiperView9></SwiperView9>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 23rem">
          <span>渐变多种创意切换</span>
          <SwiperView10></SwiperView10>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 23rem">
          <span>视差效果</span>
          <SwiperView11></SwiperView11>
        </div>
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 24rem">
          <span>延迟加载图片</span>
          <SwiperView12></SwiperView12>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 24rem">
          <span>自定义插件</span>
          <SwiperView13></SwiperView13>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 24rem">
          <span>滑动菜单</span>
          <SwiperView14></SwiperView14>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div style="width:100%;height: 24rem">
          <span>延迟加载图片</span>
<!--          <SwiperView12></SwiperView12>-->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">

</style>
